<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: '87' + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="积分排行"
        :customNavContentBgColor="'linear-gradient(90deg, #ffd700 0%, #ff8c00 100%)'" />
      <scroll-view scroll-y class="scroll-view-content">
        <view class="score-ranking-page">
          <!-- 顶部Banner -->
          <view class="top-banner">
            <view class="banner-left">
              <view class="banner-left-title mr-25">
                <text class="title">积分</text>
                <text class="subtitle">排行榜</text>
              </view>
              <view class="banner-left-btn">
                <view class="top-btn mt-5">TOP100</view>
              </view>
            </view>
            <!-- <view class="banner-right">
            </view> -->
          </view>

          <!-- 排行榜头部 -->
          <view class="ranking-header">
            <view class="header-left">
              <text class="header-title">积分排行榜</text>
              <image class="help-icon" :src="imgUrl + 'question@2x.png'" />
            </view>
            <view class="header-right">
              <picker mode="selector" :range="years" @change="onYearChange">
                <view class="picker">{{ selectedYear }}</view>
              </picker>
              <picker mode="selector" :range="periods" @change="onPeriodChange">
                <view class="picker">{{ selectedPeriod }}</view>
              </picker>
            </view>
          </view>

          <!-- 排行榜列表 -->
          <view class="ranking-list">
            <view class="list-header">
              <view class="col rank">排行</view>
              <view class="col athlete">运动员</view>
              <view class="col score">积分</view>
            </view>
            <view v-for="(item, idx) in list" :key="idx" class="list-item">
              <view class="col rank">
                <image v-if="item.rank <= 3" class="medal" :src="getMedalIcon(item.rank)" />
                <text v-else class="rank-num">{{ item.rank }}</text>
                <!-- <image v-if="idx < 3" class="medal" :src="getMedalIcon(idx + 1)" />
                <text v-else class="rank-num">{{ idx + 1 }}</text> -->
              </view>
              <view class="col athlete">
                <image class="avatar" :src="item.avatar" />
                <text class="name">{{ item.username }}</text>
              </view>
              <view class="col score">{{ item.mpoints }}</view>
            </view>
          </view>
        </view>


      </scroll-view>

    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_RECORD_POINTS_POST } = useRequest();
  const years = ['2025', '2024', '2023']
  const periods = ['年度']
  const selectedYear = ref('2025')
  const selectedPeriod = ref('年度')

  const list = ref([])

  function getMedalIcon(rank) {
    const icons = {
      1: imgUrl + 'firstPlace@2x.png',
      2: imgUrl + 'runner-up@2x.png',
      3: imgUrl + 'thirdPlace@2x.png'
    }
    return icons[rank]
  }

  function onYearChange(e) {
    selectedYear.value = years[e.detail.value]
    getRECORDPOINTS()
  }
  function onPeriodChange(e) {
    selectedPeriod.value = periods[e.detail.value]
    getRECORDPOINTS()
  }
  onShow(() => {
    getRECORDPOINTS()
  })
  const getRECORDPOINTS = async () => {
    let params = {
      year: selectedYear.value,
      period: selectedPeriod.value
    }
    console.log(params)
    try {

      const res = await API_RECORD_POINTS_POST(params)
      console.log('getRECORDPOINTS', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          list.value = res.data.data;
        } else {
          list.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('list', list.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
</style>